var g_images = new Array();
var g_emptyCords = [0,0];
var g_isMoved = false;
var g_steps = 0;

function checkWin()
{	
	if(
	( ( parseInt(g_images[0].style.top) == 0 ) && ( parseInt(g_images[0].style.left) == 0) ) &&
	( ( parseInt(g_images[1].style.top) == 0 ) && ( parseInt(g_images[1].style.left) == 105) ) &&
	( ( parseInt(g_images[2].style.top) == 0 ) && ( parseInt(g_images[2].style.left) == 210) ) &&
	( ( parseInt(g_images[3].style.top) == 105 ) && ( parseInt(g_images[3].style.left) == 0) ) &&
	( ( parseInt(g_images[4].style.top) == 105 ) && ( parseInt(g_images[4].style.left) == 105) ) &&
	( ( parseInt(g_images[5].style.top) == 105 ) && ( parseInt(g_images[5].style.left) == 210) ) &&
	( ( parseInt(g_images[6].style.top) == 210 ) && ( parseInt(g_images[6].style.left) == 0) ) &&
	( ( parseInt(g_images[7].style.top) == 210 ) && ( parseInt(g_images[7].style.left) == 105) )
	)
	{
		alert("Congratulations!\nTotal:" +g_steps+ " steps");
		document.getElementById("winMsg").innerHTML = "You Win!";
		document.getElementById('over').style.display = "block";
		document.getElementById('startGame').src = "/images/play.png";
	}
}

function swap( imgId )
{
	if ( !g_isMoved )
	{
		var choosenImg = g_images[imgId-1];
		
		var empTop = parseInt( g_emptyCords[0] );
		var empLeft = parseInt( g_emptyCords[1] );
		var choosTop = parseInt( choosenImg.style.top );
		var choosLeft = parseInt( choosenImg.style.left);
		
		//alert("Choosen:" +choosTop+ "," +choosLeft+ "\nEmpty:" +empTop+ "," +empLeft+ ".");	
		
		if ( ( choosTop == empTop ) && ( ( empLeft - choosLeft ) >= 0 ) && ( ( empLeft - choosLeft ) <= 205 ) )
		{
			g_isMoved = true;
			moveRight( imgId, 1 , choosLeft );
			g_emptyCords = [ choosTop, choosLeft ];
		}
		else if ( ( choosTop == empTop ) && ( ( choosLeft - empLeft ) >= 0 ) && ( ( choosLeft - empLeft ) <= 205 ) )
		{
			g_isMoved = true;
			moveLeft( imgId, 1 , choosLeft );
			g_emptyCords = [ choosTop, choosLeft ];
		}
		else if ( ( choosLeft == empLeft ) && ( ( choosTop - empTop ) >= 0 ) && ( ( choosTop - empTop ) <= 205 ) )
		{
			g_isMoved = true;
			moveTop( imgId, 1 , choosTop );
			g_emptyCords = [ choosTop, choosLeft ];
		}
		else if ( ( choosLeft == empLeft ) && ( ( empTop - choosTop ) >= 0 ) && ( ( empTop - choosTop ) <= 205 ) )
		{
			g_isMoved = true;
			moveBottom( imgId, 1 , choosTop );
			g_emptyCords = [ choosTop, choosLeft ];
		}
	}
}

function moveBottom( imgId, step, start )  
{
	var choosenImg = g_images[imgId-1];
	if ( step < 106)
	{
		choosenImg.style.top = ( start + ( step * 1 ) ) + 'px';
		step++;
		setTimeout("moveBottom(" + imgId + "," + step + "," + start + ")", 1 );
	}
	else
	{
		g_isMoved = false;
		g_steps++;
		document.getElementById("steps").innerHTML = g_steps;
		checkWin();
	}
}

function moveTop( imgId, step, start ) 
{
	var choosenImg = g_images[imgId-1];
	if ( step < 106)
	{
		choosenImg.style.top = ( start - ( step * 1 ) ) + 'px';
		step++;
		setTimeout("moveTop(" + imgId + "," + step + "," + start + ")", 1 );
	}
	else
	{
		g_isMoved = false;
		g_steps++;
		document.getElementById("steps").innerHTML = g_steps;
		checkWin();
	}
}

function moveLeft( imgId, step, start ) 
{
	var choosenImg = g_images[imgId-1];
	if ( step < 106)
	{
		choosenImg.style.left = ( start - ( step * 1 ) ) + 'px';
		step++;
		setTimeout("moveLeft(" + imgId + "," + step + "," + start + ")", 1 );
	}
	else
	{
		g_isMoved = false;
		g_steps++;
		document.getElementById("steps").innerHTML = g_steps;
		checkWin();
	}
}

function moveRight( imgId, step, start ) 
{
	var choosenImg = g_images[imgId-1];
	if ( step < 106)
	{
		choosenImg.style.left = ( start + ( step * 1 ) ) + 'px';
		step++;
		setTimeout("moveRight(" + imgId + "," + step + "," + start + ")", 1 );
	}
	else
	{
		g_isMoved = false;
		g_steps++;
		document.getElementById("steps").innerHTML = g_steps;
		checkWin();
	}
}

function checkSolved( emptyPos )
{
	var solveNum = 0;
	var empString = ( ( emptyPos - emptyPos %  3) / 3 + 1 );

	for(var i = 0; i < 8; i++)
	{
		var currPos = g_images[i].pos;
		for(var j = (i+1); j < 8; j++ )
		{
			if( g_images[j].pos < currPos )
			{
				solveNum++;
			}
		}
	}
	if ( ( ( solveNum + empString ) % 2 ) == 0 )
	{
		return false;
	}
	else
	{
		return true;
	}
}

function locateImages( arrPos, emptyPos )
{
	for(var i = 0; i < 9; i++)
	{
		if( i == 8 )
		{
			g_emptyCords = arrPos[emptyPos];
		}
		else
		{
			g_images[i].style.top =  arrPos[g_images[i].pos][0] +'px';
			g_images[i].style.left = arrPos[g_images[i].pos][1] +'px';
		}
	}
}

function tryLocateRandom( arrPos )
{
	var randArr = [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ];
	var emptyPos = 0;
	for(var num = 8, i = 0; num >= 0, i < 9; num--, i++)
	{
		var rand = Math.round(Math.random()*num);
		
		if( i == 8 )
		{
			emptyPos = randArr[rand];
		}
		else
		{
			g_images[i].pos = randArr[rand];
		}
		
		var temp = randArr[rand];
		randArr[rand] = randArr[num];
		randArr[num] = temp;
	}
	if( checkSolved( emptyPos ) )
	{
		locateImages( arrPos, emptyPos );
	}
	else
	{
		tryLocateRandom( arrPos );
	}
}

function startGame()
{
	document.getElementById('over').style.display = "none";
	document.getElementById('startGame').src = "/images/game.png";
	document.getElementById('titleStep').style.display = "inline-block";
	document.getElementById("winMsg").innerHTML = "";
	document.getElementById("steps").innerHTML = 0;
	g_steps = 0;
	for(var i = 0; i < 8; i++)
	{
		g_images[i] = document.getElementById( "Img" + (i + 1) );
	}
	g_images[8] = '0';
	var arrPos = [ [0,0], [0,105], [0,210], [105,0], [105,105], [105,210], [210,0], [210,105], [210,210] ];
	tryLocateRandom( arrPos );
}